<template>
    <!-- 历史询价查询 -->
    <span style="margin:10px 20px 20px 20px ; font-size:30px;width:80%;font-weight:bold">历史询价查询</span>
    <a-card style="width: 80rem ; margin-bottom:30px">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">

            <div style="display:flex;flex-wrap: wrap;">
                <a-form-item label="报名截止时间:" style="flex-basis: calc(50% - 5px)">
                    <a-date-picker v-model:value="formState.deadline" style="margin-left:10px" />
                </a-form-item>

            </div>



            <a-form-item label="询价类别" :label-col="{ span: 0 }" :rules="[{ required: false, message: '请选择询问类别' }]">
                <a-checkbox-group v-model:value="formState1.use">
                    <a-checkbox value="1" name="type">材料</a-checkbox>
                    <a-checkbox value="2" name="type">设备</a-checkbox>
                    <a-checkbox value="3" name="type">机械租赁</a-checkbox>
                    <a-checkbox value="4" name="type">劳务分包</a-checkbox>
                    <a-checkbox value="5" name="type">机械分包</a-checkbox>
                </a-checkbox-group>
            </a-form-item>

            <a-form-item label="价格用途" :label-col="{ span: 0 }" :rules="[{ required: false, message: '请输入价格用途!' }]">
                <a-checkbox-group v-model:value="formState.use">
                    <a-checkbox value="1" name="type">采购</a-checkbox>
                    <a-checkbox value="2" name="type">预算</a-checkbox>
                    <a-checkbox value="3" name="type">结算</a-checkbox>
                    <a-checkbox value="4" name="type">招投标</a-checkbox>
                </a-checkbox-group>
            </a-form-item>

            <a-form-item label="关键词：" :label-col="{ span: 0 }" >
                <a-input-search v-model:value="value" placeholder="请选择内容"  size="large"
                    @search="onSearch" style="width: 40%" >
                    <template #enterButton>
                        <a-button style="background-color:#F6F6F6; "> 搜索 </a-button>
                      </template>
                </a-input-search>
            </a-form-item>

            <a-form-item  :label-col="{ span: 0 }" >
                <!-- 一个表格 -->
                <a-table :columns="columns" :data-source="dataSource"></a-table>


            </a-form-item>


        </a-form>
    </a-card>
</template>

<script lang="ts">
import { reactive } from 'vue'
import { ref } from 'vue';

export default {
  setup() {
    const columns = [
      {
        title: 'Column 1',
        dataIndex: 'column1'
      },
      {
        title: 'Column 2',
        dataIndex: 'column2'
      },
      {
        title: 'Column 3',
        dataIndex: 'column3'
      },
      {
        title: 'Column 4',
        dataIndex: 'column4'
      },
      {
        title: 'Column 5',
        dataIndex: 'column5'
      },
      {
        title: 'Column 6',
        dataIndex: 'column6'
      },
      {
        title: 'Column 7',
        dataIndex: 'column7'
      },
      {
        title: 'Column 8',
        dataIndex: 'column8'
      }
    ];

    const originalData = [
      { key: '1', column1: 'Row 1', column2: 'Row 1', column3: 'Row 1', column4: 'Row 1', column5: 'Row 1', column6: 'Row 1', column7: 'Row 1', column8: 'Row 1' },
      { key: '2', column1: 'Row 2', column2: 'Row 2', column3: 'Row 2', column4: 'Row 2', column5: 'Row 2', column6: 'Row 2', column7: 'Row 2', column8: 'Row 2' },
      { key: '3', column1: 'Row 3', column2: 'Row 3', column3: 'Row 3', column4: 'Row 3', column5: 'Row 3', column6: 'Row 3', column7: 'Row 3', column8: 'Row 3' }
    ];

    const dataSource = ref([...originalData]);
    
    const value = ref<string>('');

    const onSearch = () => {
      const keyword = value.value.toLowerCase();
      const filteredData = originalData.filter(row => {
        return Object.values(row).some(value => String(value).toLowerCase().includes(keyword));
      });
      dataSource.value = filteredData;
    };

    const formState = reactive({});
    const formState1 = reactive({});

    const onFinish = (values: any) => {
      console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    return {
      columns,
      dataSource,
      onFinishFailed,
      onFinish,
      onSearch,
      formState1,
      formState,
      value
    };
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

}

.publish {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
</style>